<template>
    <div>
        <ul class='drag-distrint'>
          <li @dragend='dragend($event,key)' draggable="true" v-for='(item, key) in list' >{{ item }}</li>
        </ul>
        <ul
          class="new-drag-distrint"
          @dragenter='targetDragenter'
          @dragover = 'targetDragover'
        >
          <li>
            新的区域
          </li>
        </ul>
    </div>
</template>
<script>
    export default{
        data(){
            return{
              list: ['abc', 'ccc', 'ddd', 'eee', 'dffff'],
              targetIndex : -1 ,
            }
        },
        components:{

        },
        mounted(){},
        methods:{
          dragend(e, index) {
            console.log(e, index)
            this.targetIndex = index
          },
          targetDragenter(e){
            console.log(e, 222)
          },
          targetDragover(e){
             event.preventDefault();
             console.log(e, 444)
          }
        }
    }
</script>
<style scoped lang='less'>
  .drag-distrint, .new-drag-distrint{
    border: 1px solid black ;
    box-shadow: 10px 10px 10px grey;
    margin-bottom: 50px ;
    li{
      text-align: left;
      height: 100px ;
      border: 1px solid red;
      line-height: 100px;
      font-size: 40px;
      padding-left: 30px ;
    }
  }
</style>
